<template>
	<view class="container">

		<!-- 页面头部 -->
		<view class="main-header"
			:style="{height:(statusBarHeight + titleBarHeight) + 'px',paddingTop: statusBarHeight + 'px'}">
			<image class="bg-image" src="/static/background/user-header4.jpg" mode="scaleToFill"></image>

		
			<view @tap="setBaseInfo" class="title-text" v-if="isLogin"
				:style="{height: titleBarHeight + 'px'}" >{{BaseInfoStr}}
			</view>
			
			<view v-else class="title-text" @tap="handleLogin"
				:style="{height: titleBarHeight + 'px'}" >点击登录
			</view>
			<u-icon v-if="isLogin"  @tap="setBaseInfo"  style="color: white;" name="arrow-down-fill"></u-icon>
			
		</view>
		
		<OGrid col="2" gutter radius title="制作试卷">
		         <OGridItem text="课本选词出题" icon="/static/book.png" @click="handleTextBookTitle"></OGridItem>
		         <OGridItem text="自由组词出题"  icon="/static/ziyou.png"></OGridItem>
		         <OGridItem text="制作记录" dot icon="/static/record.png"></OGridItem>
		         <OGridItem text="试卷题库" icon="/static/sjtk.png"></OGridItem>
		</OGrid>
		
		<OGrid col="3" gutter radius title="我的服务">
		         <OGridItem text="使用帮助" icon="/static/help.png"></OGridItem>
		         <OGridItem text="建议箱" badge="99+" icon="/static/box.png"></OGridItem>
		         <OGridItem text="系统消息" dot icon="/static/message.png"></OGridItem>
		</OGrid>
		<view>
			<u-popup v-model="show" mode="top">
				<view style="width: auto;height: 760rpx; text-align: center;">
					<view style="margin-top: 150rpx;">
						<BaseInfoSet ref="BaseInfoSet" @cancelClickEvent="cancelEventHander" @okClickEvent="okClickEventHander"></BaseInfoSet>
					</view>
				</view>
			</u-popup>
		</view>


	</view>
</template>

<script>
	import store from '@/store'
	import LocalDataSource from '@/common/LocalDataSource'
	import AvatarImage from '@/components/avatar-image'
	import BaseInfoSet from '@/pages/index/baseInfoSet'
	import OGrid from '@/components/oveui-grid/o-grid/o-grid'
	import OGridItem from '@/components/oveui-grid/o-grid-item/o-grid-item'
	import * as UserApi from '@/api/user'
	import {
		checkLogin
	} from '@/core/app'

	export default {
		components: {
			AvatarImage,
			BaseInfoSet,
			OGrid,
			OGridItem
		},
		data() {
			return {
				// 正在加载
				isLoading: true,
				// 首次加载
				isFirstload: false,
				// 是否已登录
				isLogin: false,
				show: false,
				// 当前用户信息
				userInfo: {},
				statusBarHeight: 0,
				titleBarHeight: 0,
			}
		},
		computed:{
			BaseInfoStr(){
				if(this.isLogin == false){
					return ""
				}
				const app = this
				let bookVersion = LocalDataSource.bookVersionDataSource.find(p=>p.code == app.$store.getters.userInfo.bookVersion)
				let grade = LocalDataSource.gradeDataSource.find(p=>p.code == app.$store.getters.userInfo.grade)
				let term = LocalDataSource.termDataSource.find(p=>p.code == app.$store.getters.userInfo.term)
				return bookVersion.name + grade.name + term.name
				
			}
		},

		onLoad() {
			const SystemInfo = wx.getSystemInfoSync();
			this.statusBarHeight = SystemInfo.statusBarHeight;
		},
		onReady() {
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +
				uni.getMenuButtonBoundingClientRect().height;
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow(options) {
			this.onRefreshPage()
		},

		methods: {

			// 刷新页面
			onRefreshPage() {
				// 判断是否已登录
				this.isLogin = checkLogin()
				this.userInfo = store.getters.userInfo
				

			},
			cancelEventHander() {
				this.show = false
			},
			okClickEventHander(obj){
				let app = this
				// 提交保存个人信息
				UserApi.personal({bookVersion:obj.bookVersion,grade:obj.grade,term:obj.term,extend1:app.$store.getters.token})
				  .then(result => {
				    app.$toast(result.msg)
					let userInfo = app.$store.getters.userInfo
					userInfo.bookVersion = obj.bookVersion
					userInfo.grade = obj.grade
					userInfo.term = obj.term
					app.$store.commit('SET_USER_INFO', userInfo)
					app.show = false
					
				  })
				  .catch(err => console.log(err))
			},
			setBaseInfo(){
				this.show = this.show == true?false:true
				this.$refs.BaseInfoSet.loadPage()
			},

			// 跳转到登录页
			handleLogin() {
				!this.isLogin && this.$navTo('pages/login/index')
			},

			// 跳转到修改个人信息页
			handlePersonal() {
				this.$navTo('pages/user/personal/index')
			},
			// 跳转到修改个人信息页
			handleTextBookTitle() {
				this.$navTo('pages/textbooktitle/index')
			},

			// 退出登录
			handleLogout() {

				const app = this
				uni.showModal({
					title: '友情提示',
					content: '您确定要退出登录吗?',
					success(res) {
						if (res.confirm) {
							store.dispatch('Logout', {})
								.then(result => app.onRefreshPage())
						}
					}
				})
			},

			// 跳转到钱包页面
			onTargetWallet() {
				this.$navTo('pages/wallet/index')
			},

			// 跳转到订单页
			onTargetOrder(item) {
				this.$navTo('pages/order/index', {
					dataType: item.id
				})
			},

			// 跳转到我的积分页面
			onTargetPoints() {
				this.$navTo('pages/points/log')
			},

			// 跳转到我的优惠券页
			onTargetMyCoupon() {
				this.$navTo('pages/my-coupon/index')
			},

			// 跳转到服务页面
			handleService({
				url
			}) {
				this.$navTo(url)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.searchColumn {
		.searchContent {
			padding: 50rpx;

			.btn-box {
				padding: 10rpx;
				background: #ffffff;
				display: flex;
				justify-content: space-around;

				/deep/ .u-button {
					width: 45%;
				}
			}
		}
	}

	// 页面头部
	.main-header {
		background-color: #fff;
		// background-image: url('/static/background/user-header.png');
		position: relative;
		width: 100%;
		height: 180rpx;
		background-size: 100% 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		// padding-top: 40rpx;
		padding-left: 30rpx;

		.bg-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}
	}
	
	.title-text {
		display: inline-block;
		vertical-align: center;
		
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10rpx;
		color: white;
		font-size: 30rpx;
		font-weight: normal;
		max-width: 670rpx;
	}

	// 角标组件
	.item-badge {
		position: absolute;
		top: 0;
		right: 55rpx;
		background: #fa2209;
		color: #fff;
		border-radius: 100%;
		min-width: 38rpx;
		height: 38rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1rpx;
		font-size: 24rpx;
	}

	
	// 退出登录
	.my-logout {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;

		.logout-btn {
			width: 60%;
			margin: 0 auto;
			font-size: 28rpx;
			color: #616161;
			border-radius: 20rpx;
			border: 1px solid #dcdcdc;
			padding: 16rpx 0;
			text-align: center;
		}
	}
</style>
